import React, { Component } from 'react'
import Header from '../Common/Header'
import { scclick_action, cancel_action } from '../../store/store';
import { connect } from 'react-redux';
/* 详情页组件 */
class Detail extends Component {
    render() {
        //获取点击传来的数据
      var item=  this.props.history.location.state
        return (
            <div className="detail">
                {/* 头部导航 */}
                <Header title="商品详情" back={<span onClick={()=>{this.props.history.go(-1)}}>&lt;</span>}></Header>
                {/* 主体 */}
                <div className="content">
                    {/* 渲染当前数据 */}
                    <div className="item">
                                <div className="img">
                                  <img src={item.pic} alt=""/>
                                </div>
                                <div className="text">
                                <div className="wb">
                                    {item.title}</div> 
                                    <div className="ks">￥:{item.ks}</div>
                                    <div className="yh">用户:{item.iphone}</div>
                                </div>
                                <div className="btn">
                                    {/* 查找收藏列表 */}
                                    {/* 当前项？"取消收藏":"收藏" */}
                                    {/* 点击取消收藏从收藏列表删除该项----点击删除添加该项到收藏列表 */}
                                    {
                                    this.props.sclist.find(ite=>ite.id===item.id)
                                    ?<span className="cyjp" onClick={()=>{this.props.cancel(item.id)}}>取消收藏</span>
                                    :<span className="cyjp" onClick={()=>{this.props.scclick(item)}}>收藏</span>
                                    }
                                </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect(
    (state)=>{
            /* 获取store中的sclist */
        return{
            sclist:state.sclist
        }
    },
    (dispatch)=>{
            /* 点击收藏和取消收藏action */
        return{
            scclick:(item)=>{
                dispatch(scclick_action(item))
            },
            cancel:(id)=>{
                dispatch(cancel_action(id))
            }
        }
    }
)(Detail)